Javascript ile Karakter Sayacı Yapımı

Merhabalar,

Bu yazımda Javascript kullanarak bir <input> veya <textarea> gibi kullanıcıdan veri alınan alanlara yazıldıkça, anlık olarak karakter sayısını ekrana yazdıran bir örnek göstereceğim.

Bu tür karakter sayaçlarını birçok formda görebilirsiniz. Aynı zamanda bu örnek onkeyup attribute (nitelik) kullanımını anlamak açısından da faydalı olacaktır.

Her tuşa basıldığında belirttiğimiz bir fonksiyon çalışacak ve metnin uzunluğunu alarak ekrana yazacaktır. Giriş yapıldıkça fonksiyon tetiklenmeye devam edeceği için sayım sürekli güncel kalacaktır.

Ben örnekte <textarea> kullanacağım ama bu işlem <input> gibi diğer alanlarda da geçerlidir.

HTML Kodu:

<textarea onkeyup="karakterSay(this.value);" rows="5"></textarea>
<p>Karakter Sayısı: <span id="karakter">0</span></p>

Javascript Kodu:

<script>
  function karakterSay(metin) {
    document.getElementById('karakter').innerText = metin.length;
  }
</script>

Bu örnekle kullanıcı her karakter yazdığında ya da sildiğinde, karakterSay() fonksiyonu tetiklenerek mevcut karakter sayısını <span id="karakter"> içine yazacaktır.

Bu yöntemle karakter limiti koymak, kullanıcıya anlık bilgi vermek ve form kontrolü yapmak mümkündür.

Mutlu Kodlamalar! :)